<template>
  <div class="product-card" @click="goToDetail">
    <div v-if="product.type === 1" class="deal-tag">{{ $t('秒杀') }}</div>
    <div class="product-image">
      <img :src="product.image" :alt="product.name">
    </div>
    <div class="product-content">
      <h3 class="product-title">{{ product.name }}</h3>
      <div class="product-price">
        <span class="price">{{ langStore.languageSymbol }}{{ product.price * langStore.languageRate }}</span>
        <!-- <span class="original-price" v-if="product.price">{{ langStore.languageSymbol }}{{ product.price * langStore.languageRate }}</span> -->
      </div>
<!--      <div class="product-rating">-->
<!--        <div class="stars">-->
<!--          <i class="fas fa-star" v-for="n in Math.floor(product.rating)" :key="n"></i>-->
<!--          <i class="fas fa-star-half-alt" v-if="product.rating % 1 >= 0.5"></i>-->
<!--        </div>-->
<!--        <span class="reviews">{{ product.reviews.toLocaleString() }}</span>-->
<!--      </div>-->
<!--      <p class="product-description">{{ product.description }}</p>-->
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import useLangStore from '@/store/modules/lang'
const langStore = useLangStore()

const router = useRouter()
const props = defineProps({
  product: {
    type: Object,
    required: true
  }
})

const goToDetail = () => {
  router.push('/products/detail/' + props.product.id)
}
</script>

<style lang="scss" scoped>
.product-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s;
  cursor: pointer;
  position: relative;

  &:hover {
    transform: translateY(-2px);
  }

  .deal-tag{
    position: absolute;
    top: 10px;
    right: 10px;
    background: #d91818;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
    z-index: 3;
  }

  .product-image {
    position: relative;
    padding-top: 100%;

    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      // padding: 10px;
    }
  }

  .product-content {
    padding: 15px;

    .product-title {
      font-size: 14px;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      overflow: hidden;
      height: 40px;
    }

    .product-price {
      margin-bottom: 8px;
      display: flex;
      align-items: baseline;
      gap: 8px;

      .price {
        font-size: 20px;
        font-weight: bold;
        color: #0F1111;
      }

      .original-price {
        color: #565959;
        text-decoration: line-through;
        font-size: 14px;
      }
    }

    .product-rating {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;

      .stars {
        color: #ffa41c;
      }

      .reviews {
        color: #007185;
        font-size: 12px;
      }
    }

    .product-description {
      font-size: 12px;
      color: #565959;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      overflow: hidden;
    }
  }
}
</style>
